<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>支付页面</title>

    <link rel="stylesheet" href="webjars/bootstrap/4.3.1/css/bootstrap.min.css"/>
    <script src="webjars/jquery/3.0.0/jquery.min.js"></script>
    <script src="webjars/popper.js"></script>
    <script src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
    <div class="card">
        <div class="card-header">
            <h1 class="card-title">您的订单</h1>
        </div>
        <div class="card-body">
            <table class="table table-hover">
                <thead class="table-dark">
                <tr>
                    <th class="">订单编号</th>
                    <th>应付价格</th>
                    <th></th>
                </tr>
                </thead>

                <tr th:each="order:${userOrderList}">
                    <td th:text="${order.oId}"></td>
                    <td th:text="${order.actualPayment}"></td>
                    <td><a th:href="@{'payit.do?oid='+${order.oId}}" name="payButton" onclick="send()">支付</a></td>
                </tr>
            </table>

<!--            <a href="/payit.do">支付</a>-->
        </div>

        <div class="card-footer">
            点餐系统105
        </div>

    </div>


</div>


<input type="hidden" id="text" value="alert background someone has pay her/his order"/>
<div id="message"></div>
<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/websocket");
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById("text").value;
        websocket.send(message);
        // alert("已经通知后台支付成功");
    }

    // var m = document.get
    // m.onmousedown = function () {
    //     send();
    // }

</script>


</body>

</html>